<template>
  <div>
      <searchBox @searchChange = "searchChange" />

      <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
  <div class="gva-table-box">
  <el-text class="mx-1" size="large">详细数据</el-text>
      <el-table
      ref="multipleTable"
      style="width: 100%"
      tooltip-effect="dark"
      row-key="ID"
      :data="topicList"
      border
    >
      <el-table-column
        align="left"
        label="日期"
        prop="inDate"
        sortable
      />
      <el-table-column
        align="left"
        label="话题"
        prop="title"
      >
      </el-table-column>
      <el-table-column
        align="left"
        label="昨日新增用户"
        prop="userInc"
        sortable
      />
      <el-table-column
        align="left"
        label="昨日新增播放"
        prop="playInc"
        sortable
      >
      </el-table-column>
    </el-table>
  </div>
      </div>
  </template>  
  <script lang="ts" setup>
  import { ref,watch } from 'vue'
  import lineChart from '../../components/echarts/lineChart.vue';
  import searchBox from '../../components/search/searchBox.vue';
  import type { TabsPaneContext } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';

  import {
  getHugeList
} from '@/api/openApi'

  defineOptions({
    name: 'qmTopicDetail'
  })
  
const router = useRouter()
const route = useRoute()
// =========== 表格控制部分 ===========
const page = ref(1)
const tableData = ref([])
const yesterdayData = ref([])
const lineData = ref([])
const searchInfo = ref({})
const activeName = ref<string|number>('first')
  const handleClick = (tab: TabsPaneContext, event: Event) => {
  lineData.value = []
  setTimeout(() => {
    lineData.value = JSON.parse(JSON.stringify(topicList.value))
  }, 200);
}



var searchChange = function(date){
searchInfo.value = date
getTableData()
}

const date = new Date()
date.setDate(date.getDate() - 1)
const date1 = date.toISOString().split('T')[0]; 
const yesterDaySearchDate = {start_date:date1,end_date:date1}

const chartData = ref({
  xAxis: [],
  series: [{
    name: '昨日新增用户',
    type: 'line',
    data: []
  },{
    name: '昨日新增播放',
    type: 'line',
    data: []
  }],
  legend: ['昨日新增用户','昨日新增播放'],
  title: '话题详情'
})
// 查询
const topicList = ref([])
const getTableData = () => {
  getHugeList({ type: 'collectTopicDetail',params:route.query.collectId , ...searchInfo.value }).then(res=>{
    if (res.code === 0) {
      chartData.value.xAxis = []
      chartData.value.series[0].data = []
      chartData.value.series[1].data = []
      topicList.value = []
      res.data.list.forEach(item => {
        const value = JSON.parse(item.response)
        chartData.value.xAxis.push(value.inDate)
        chartData.value.series[0].data.push(value.userInc)
        chartData.value.series[1].data.push(value.playInc)
        value.playInc = addCommas(value.playInc)
        value.userInc = addCommas(value.userInc)
        topicList.value.push(value)
        
      })
      lineData.value = topicList.value
    }
  })
}

function addCommas(value) {
  // ①如下方法：处理千分位并保留两位小数
  // return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  // ②如下方法：将整数位处理成千分位，小数位不变
  const parts = String(value).split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return parts.join('.')
}

  
</script>      
<style>
.el-col {
  text-align: center;
}
</style>